<template>
  <view class="user-container">
    <tabBar :activeIndex="3" />
    <view class="right-content">
      <view class="user-top">
        <view class="user">
          <u-avatar :src="src" size="77" shape="circle"></u-avatar>
          <view class="id">id:1001201</view>
        </view>
        <view class="login-out" @tap="flag = true">
          <u--image
            :showLoading="true"
            src="/static/img/u1936.png"
            width="112rpx"
            height="88rpx"
            mode="scaleToFill"
          ></u--image>
        </view>
      </view>
      <u-gap height="20" bgColor="#fff"></u-gap>
      <u-cell-group :border="cellBorder">
        <u-cell
          :titleStyle="{ fontWeight: 500 }"
          @click="openPopup(item.popupData)"
          :title="item.title"
          v-for="(item, index) in list"
          :key="index"
          :value="item.rightContent"
          isLink
        >
          <u-switch
            v-if="!item.rightContent"
            slot="right-icon"
            v-model="checkValue"
            activeColor="#00e165"
            @change="checkChange"
          ></u-switch>
        </u-cell>
      </u-cell-group>
      <u-popup
        :safeAreaInsetBottom="true"
        :safeAreaInsetTop="true"
        :mode="popupData.mode"
        :show="show"
        :round="popupData.round"
        :overlay="popupData.overlay"
        :borderRadius="popupData.borderRadius"
        :closeable="popupData.closeable"
        :closeOnClickOverly="popupData.closeOnClickOverly"
        @close="close"
        @open="open"
      >
        <view
          class="u-popup-slot"
          :style="{
            width: ['bottom', 'top'].includes(popupData.mode)
              ? '750rpx'
              : '88.24vw',
            marginTop: ['left', 'right'].includes(popupData.mode) ? '0' : '0',
          }"
        >
          <EditUser :close="close" />
        </view>
      </u-popup>
      <Modaluse v-show="flag" @confirm="loginOutTo" @cancel="flag = false" />
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";
import EditUser from "@/components/editUserInfo.vue";
import Modaluse from "@/components/modal_use.vue";
export default {
  components: {
    EditUser,
    Modaluse,
  },
  data() {
    return {
      //隐藏u-cell边框
      cellBorder: false,
      //头像地址
      src: "",
      //
      checkValue: true,
      show: false,
      popupData: {
        overlay: true,
        mode: "bottom",
        borderRadius: "",
        closeable: true,
        closeOnClickOverly: true,
      },
      list: [
        {
          popupData: {
            overlay: true,
            mode: "right",
            round: false,
            closeOnClickOverly: true,
            edit: true,
          },
          title: "个人信息",
          rightContent: "编辑",
        },
        {
          popupData: {
            overlay: true,
            mode: "right",
            round: false,
            closeOnClickOverly: true,
          },
          title: "变更手机号",
          rightContent: "13165498759",
        },
        {
          popupData: {
            overlay: true,
            mode: "right",
            round: false,
            closeOnClickOverly: true,
            noPop: true,
          },
          title: "通知提醒",
          rightContent: "",
        },
        {
          popupData: {
            overlay: true,
            mode: "right",
            round: false,
            closeOnClickOverly: true,
          },
          title: "版本更新",
          rightContent: "已是最新版本",
        },
        {
          popupData: {
            overlay: true,
            mode: "right",
            round: false,
            closeOnClickOverly: true,
          },
          title: "关于我们",
          rightContent: "中国南方电网有限责任公司",
        },
      ],
      //确认弹框
      flag: false,
    };
  },
  methods: {
    ...mapActions("user", ["loginOut"]),
    openPopup(popupData) {
      if (popupData.noPop || !popupData.edit) {
        return;
      } else {
        this.popupData = popupData;
        uni.$u.sleep().then(() => {
          this.show = !this.show;
        });
      }
    },
    navigateBack() {
      uni.navigateBack();
    },
    open() {
      // console.log('open');
    },
    //关闭编辑页面
    close() {
      this.show = false;
      // console.log('close');
    },
    checkChange(e) {
      console.log(e);
    },
    // 登出
    loginOutTo() {
      this.loginOut();
      uni.redirectTo({
        url: "/pages/login/login"
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/css/_px2vw.scss";
//自己写的样式
.user-top {
  position: relative;
  width: 100%;
  height: vw(200);
  background-color: #3291f8;
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .id {
      font-size: vw(18);
      color: #fff;
      font-weight: 700;
      margin-top: vw(30);
    }
  }
  .login-out {
    position: absolute;
    top: vw(12);
    right: vw(12);
  }
}
.u-cell-group {
  padding-left: vw(40);
  padding-right: vw(95);
}
</style>
